<template>
  <div class="home-head">
    <img class="top-head" :src="personAvater"/>
    <div class="person-msg">
      <div class="person-msg-span">{{person.nickname}}</div>
      <div class="person-msg-span">{{person.phoneNumber}}</div>
    </div>
    <div class="dev-msg">
      <router-link to="store">
        <div class="dev-flow">
          <div class="dev-flow-span"><span>{{flow}}</span>G</div>
          <div class="dev-flow-span head-base">可用流量</div>
        </div>
      </router-link>
      <router-link to="devList">
        <div class="dev-number">
          <div class="dev-number-span"><span>{{number}}</span>台</div>
          <div class="dev-number-span head-base">设备个数</div>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
import {USERINFO, HAVEDEVNUM, FLOWINFO} from '../../api/request'

export default {
  data () {
    return {
      personAvater: '',
      person: {},
      flow: '0',
      number: '0'
    }
  },
  created () {
    // console.log(this.getStatus(this.$route.path))
    console.log(this.$store.getters.uid)
    this.sendcode()
  },
  methods: {
    sendcode: function () {
      USERINFO(this.$store.getters.uid).then(
        res => {
          let respData = res.data
          if (respData.code === 200) {
            this.person = respData.data
            this.personAvater = this.person.avatar
          }
        },
        error => {
          console.log(error)
        })
      HAVEDEVNUM(this.$store.getters.uid).then(
        res => {
          let respData = res.data
          if (respData.code === 200) {
            if (respData.count === 0) {
              this.number = 0
            } else {
              this.number = respData.count
            }
          }
        },
        error => {
          console.log(error)
        })
      FLOWINFO(this.$store.getters.uid).then(
        res => {
          let respData = res.data
          if (respData.code === 200) {
            this.flow = respData.residualflow.toFixed(2)
          }
        },
        error => {
          console.log(error)
        })
    }
  }
}
</script>

<style scoped>
  .home-head {
    position: relative;
    height: 1.9rem;
    background-color: #fff;
    color: #837d7d;
    /*    box-shadow: 0 0 0.5rem 0.35rem rgba(185, 187, 188, 0.2);*/
    padding-left: 0.3rem;
    padding-top: 0.31rem;
  }

  .top-head {
    line-height: 1.9rem;
    width: 1.28rem;
    height: 1.28rem;
    vertical-align: middle;
  }

  .person-msg {
    display: inline-block;
    vertical-align: middle;
  }

  .person-msg-span {
    font-size: 0.3rem;
    line-height: 0.5rem;
  }

  .dev-msg {
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    left: 4.1rem;
    top: 0.4rem;
  }

  .dev-flow {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
  }

  .dev-number {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    margin-left: 0.5rem;
  }

  .dev-flow-span {
    color: #129cfd;
    font-size: 0.26rem;
    line-height: 0.5rem;
  }

  .dev-flow-span span {
    font-size: 0.38rem;
  }

  .dev-number-span {
    line-height: 0.5rem;
    font-size: 0.24rem;
    color: #129cfd;
  }

  .dev-number-span span {
    font-size: 0.38rem;
  }

  .head-base {
    font-size: 0.28rem;
    color: #505050;
  }
</style>
